<template>
	<view class="">
		<view class="uni-p-b-98"></view>
		<view class="acea-row row-middle row-between footer">
			<view class="acea-row info">
				<image
					:src="contact.contacts&&contact.contacts.length>0?contact.contacts[0].avatar : '@/static/images/f.png'"
					mode="" @click="toDetail(contact)"></image>
				<view class="name">
					<view class="online" :class="contact.isOnline?'':'online-gray'"></view>
					<view class="text line1">{{contact.contactExternal?contact.contactExternal:'暂无'}}</view>
				</view>
			</view>
			<view class="collect" @click="fansOpear">
				<view class="img">
					<image src="../../static/images/red_love.png" mode="" v-if="collected"></image>
					<image src="../../static/images/gray_love.png" mode="" v-else></image>
				</view>
				<view class="">{{collected?'已关注':'关注'}}</view>
			</view>
			<view class="acea-row row-middle">
				<view class="acea-row row-column row-middle row-center white-btn" @click="toP(contact)">
					<view class="big-text">拨打电话</view>
					<view class="small-text">
						{{contact.phoneExternal ? (info.statusPhone == 1 ?contact.phoneExternal :contact.phoneExternal.replace(/(\d{3})\d*(\d{4})/,'$1****$2')):'暂无'}}
					</view>
				</view>
				<view class="acea-row row-column row-middle row-center red-btn">
					<view class="big-text" @click="toContact">立即沟通</view>
					<!-- <view class="small-text">(已聊{{contact.contacts?contact.contacts:0}}人)</view> -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getWhether
	} from '@/api/api.js'
	import {
		addUserFriend,
		delUserFriend,
	} from '@/api/user.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		name: 'detailFooter',
		props: {
			isLove: {
				type: Boolean,
				default: false
			},
			id: {
				type: String,
				default: ''
			},
			contact: {
				type: Object,
				default: () => {
					return {
						name: '暂无',
						mobile: '暂无',
						contacts: 21,
						isOnline: 1
					}
				}
			},
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			...mapGetters(['isLogin']),
		},
		data() {
			return {
				collected: false
			}
		},
		created() {
			this.collected = this.isLove

		},
		watch: {
			contact: {
				handler() {
					this.getCollectStatus()
				},
				immediate: true

			}
		},
		methods: {
			toP(contact) {
				if (contact.contacts[0].open == false) {
					console.log("滚蛋啊啊啊啊")
				}
				console.log(contact['phoneExternal'])
				this.$emit("toPhone")
				let type = this.info.id ? 0 : (this.info.askrentId ? 1 : 2);
				let infoId = this.info.id || this.info.askrentId || this.info.buystoreId;
				let statusPhone = this.info.statusPhone;
				contact['phoneExternal'] ? getApp().globalData.toPhone(contact.phoneExternal, '', {
					statusPhone,
					infoId,
					type,
					storeCategory: this.info.storeCategory,
					open: contact.contacts[0].open,
					infoCity: this.info.city,
					contactName: this.contact.contactName,
				}) : null
			},
			changeCollect() {
				this.$emit("toCollect")
				this.collected = !this.collected;
			},
			fansOpear() {
				let that = this;
				if (this.collected) {
					uni.showModal({
						title: '提示',
						content: '确定取消关注',
						success: function(res) {
							if (res.confirm) {
								that.change()
							}
						}
					});
					return;
				}
				this.change()
			},
			//跳转个人主页
			toDetail(item) {
				let that = this;
				//如果是求购 直接跳转发布人
				if (that.info.buystoreId) {
					uni.navigateTo({
						url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + that.info.publisher,
						events: {
							fanss(data) {
								that.fansOpear(data.info, data.callback);
							}
						}
					})
					return;
				}


				if (that.info.publisher && parseInt(that.info.publisher) && that.info.publisher != item.contacts[0].uid) {
					uni.showModal({
						title: '提示',
						content: '当前人不是发布人,是否跳转到发布人首页',
						confirmText: '跳发布人',
						cancelText: '跳当前人',
						success: function(res) {
							let id = ''
							if (res.confirm) {
								id = that.info.publisher;
							} else if (res.cancel) {
								id = item.contacts[0].uid
							}
							uni.navigateTo({
								url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + id,
								events: {
									fanss(data) {
										that.fansOpear(data.info, data.callback);
									}
								}
							})
						}
					});
					return;
				}

				if (item.contacts && item.contacts.length > 0) {
					uni.navigateTo({
						url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + item.contacts[0].uid,
						events: {
							fanss(data) {
								that.fansOpear(data.info, data.callback);
							}
						}
					})
					return;
				}
				this.$util.Tips({
					title: '暂未获取到联系人'
				})

			},
			async change() {
				//关注/取关
				let res;
				if (this.collected) {
					res = await delUserFriend({
						uid: this.contact.contacts[0].uid
					})
				} else {
					res = await addUserFriend({
						friendId: this.contact.contacts[0].uid
					});
				}
				if (res.code == 200) {
					this.collected = !this.collected;
				}
			},
			getCollectStatus() {

				if (!this.contact.contacts[0].contactId || !this.isLogin) {
					return;
				}
				getWhether({
					friendId: this.contact.contacts[0].contactId
				}).then(res => {
					if (res.code == 200) {
						this.collected = res.data.length > 0 ? true : false
					}
				})
			},
			toContact() {

				if (!this.contact || !this.contact.phoneExternal) {
					this.$util.Tips({
						title: '未获取到联系人'
					})
					return;
				}
				getApp().globalData.into_singleChatRoom({
					phone: this.contact.phoneExternal,
					info: this.info ? this.info : "",
					nickname: this.contact.contactName,
				})
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		width: 100%;
		padding: 30rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}

	.info {
		image {
			width: 66rpx;
			height: 66rpx;
			border-radius: 50%;
		}

		.name {
			margin-left: 12rpx;

			.text {
				max-width: 76rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				line-height: 42rpx;
			}

			.online {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.online-gray {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
			}
		}
	}

	.collect {
		width: 76rpx;
		text-align: center;
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.small-text {
		font-size: 20rpx;
		font-weight: 400;
	}

	.big-text {
		font-size: 30rpx;
		font-weight: 400;
	}

	.white-btn {
		width: 200rpx;
		height: 92rpx;
		opacity: 1;
		border-radius: 6rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		background: #ffffff;
		text-align: center;
		color: rgba(238, 33, 45, 1);
	}

	.red-btn {
		margin-left: 24rpx;
		width: 200rpx;
		height: 92rpx;
		opacity: 1;
		border-radius: 6rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		background: rgba(238, 33, 45, 1);
		text-align: center;
		color: #ffffff;
	}
</style>